<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DBC解析器测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        textarea { width: 100%; height: 200px; margin: 10px 0; }
        button { padding: 10px 20px; margin: 5px; }
        .result { border: 1px solid #ccc; padding: 10px; margin: 10px 0; background: #f9f9f9; }
        .error { color: red; }
        .success { color: green; }
    </style>
</head>
<body>
    <div class="container">
        <h1>DBC解析器测试</h1>
        
        <h3>输入DBC内容:</h3>
        <textarea id="dbcInput" placeholder="粘贴DBC文件内容到这里...">VERSION ""

NS_ : 
    CM_
    BA_DEF_
    BA_
    VAL_

BS_:

BU_: ADAS RADAR NEO

BO_ 768 VEHICLE_STATE: 8 ADAS
 SG_ SET_ME_XF9 : 7|8@0+ (1,0) [0|255] "" Vector__XXX
 SG_ VEHICLE_SPEED : 15|8@0+ (1,0) [0|255] "kph" Vector__XXX

BO_ 1072 TRACK_0: 8 RADAR
 SG_ LONG_DIST : 7|12@0+ (0.0625,0) [0|255.5] "m"  NEO
 SG_ NEW_TRACK : 11|1@0+ (1,0) [0|1] ""  NEO
 SG_ LAT_DIST : 9|10@0- (0.0625,0) [0|63.5] "m"  NEO
 SG_ REL_SPEED : 31|12@0- (0.03125,0) [0|127.5] "m/s"  NEO

CM_ SG_ 1072 LONG_DIST "距离测量信号";
VAL_ 1072 NEW_TRACK 1 "新目标" 0 "已有目标";
</textarea>

        <button onclick="testParser()">解析DBC</button>
        <button onclick="clearResults()">清除结果</button>

        <div id="results"></div>
    </div>

    <script src="script.js"></script>
    <script>
        function testParser() {
            const input = document.getElementById('dbcInput').value;
            const resultsDiv = document.getElementById('results');
            
            try {
                console.log('开始测试DBC解析器...');
                
                // 使用新的分词器和解析器
                const tokenizer = new DBCTokenizer(input);
                const parser = new DBCParser(tokenizer);
                const database = parser.parse();
                
                // 显示结果
                const stats = database.getStatistics();
                
                let html = '<div class="result success">';
                html += '<h3>✅ 解析成功!</h3>';
                html += `<p>版本: ${database.version || '未指定'}</p>`;
                html += `<p>帧数量: ${stats.frameCount}</p>`;
                html += `<p>信号数量: ${stats.signalCount}</p>`;
                html += `<p>节点数量: ${stats.nodeCount}</p>`;
                
                if (database.warnings.length > 0) {
                    html += '<h4>⚠️ 警告:</h4><ul>';
                    database.warnings.forEach(warning => {
                        html += `<li>第${warning.line}行: ${warning.message}</li>`;
                    });
                    html += '</ul>';
                }
                
                // 显示帧信息
                html += '<h4>📡 解析的帧:</h4>';
                const frames = database.getAllFrames();
                frames.forEach(frame => {
                    html += `<div style="margin-left: 20px; border-left: 3px solid #007bff; padding-left: 10px; margin-bottom: 10px;">`;
                    html += `<strong>${frame.name}</strong> (ID: 0x${frame.canId.toString(16).toUpperCase()}, DLC: ${frame.dlc})`;
                    if (frame.comment) {
                        html += `<br><em>${frame.comment}</em>`;
                    }
                    
                    const signals = frame.getAllSignals();
                    if (signals.length > 0) {
                        html += '<ul>';
                        signals.forEach(signal => {
                            html += `<li><strong>${signal.name}</strong>: ${signal.startBit}|${signal.length}@${signal.byteOrder === 'Intel' ? '1' : '0'}${signal.signedness === 'signed' ? '-' : '+'} (${signal.factor},${signal.offset}) [${signal.min}|${signal.max}] "${signal.unit}"`;
                            if (signal.comment) {
                                html += ` <em>- ${signal.comment}</em>`;
                            }
                            if (signal.choices.size > 0) {
                                html += ' <span style="color: blue;">[有值表]</span>';
                            }
                            html += '</li>';
                        });
                        html += '</ul>';
                    }
                    html += '</div>';
                });
                
                html += '</div>';
                resultsDiv.innerHTML = html;
                
            } catch (error) {
                console.error('解析错误:', error);
                resultsDiv.innerHTML = `<div class="result error">
                    <h3>❌ 解析失败</h3>
                    <p>错误信息: ${error.message}</p>
                    <p>请检查DBC内容格式是否正确。</p>
                </div>`;
            }
        }
        
        function clearResults() {
            document.getElementById('results').innerHTML = '';
        }
        
        // 页面加载后自动测试
        window.onload = function() {
            console.log('页面加载完成，可以开始测试...');
        };
    </script>
</body>
</html> 